<template>
    <template v-for="(item, index) in monitorState.matchdialog.data" :key="index">
        <template v-if="item.show">
            <div class="match_dialog"
                :style="{ left: item.position.x + 'px', top: item.position.y + 'px', zIndex: item.zindex }"
                :ref="setDialogRef(item, index)" @click="monitorStore.clickMatchDialog(item)">
                <DialogHeader :data="item" :dataindex="index" />
                <DialogContent :data="item" :dataindex="index"/>
            </div>
        </template>
    </template>
</template>

<script setup>
import DialogHeader from "./DialogHeader.vue";
import DialogContent from "./DialogContent.vue";
const { monitorStore, monitorState } = inject('MonitorStore')
const setDialogRef = (item, index) => {
    return el => {
        if (el) {
            // 在这里更新item.ref，绑定DOM元素
            item.ref = el
        }
    }
}
</script>

<style lang="scss" scoped>
.match_dialog {
    position: absolute;
    width: 450px;
    height: 300px;
    background: #fff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}
</style>

<style>
.match_dialog .el-table .el-table__cell{
  padding: 3px 0;
}
</style>